<template>
  <div class="my-image">
    <!-- 图片按钮 -->
    <div class="img_btn" @click="openDialog()">
      <img :src="value || defaltImage" alt />
    </div>
    <!-- 对话框 -->
    <el-dialog :visible.sync="dialogVisible" width="720px">
      <!-- 选项卡 activeName绑定当前tabs激活的选项卡name属性值-->
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="素材库" name="list">
          <!-- 切换按钮 -->
          <el-radio-group @change="changeCollect()" v-model="filterParams.collect" size="small">
            <el-radio-button :label="false">全部</el-radio-button>
            <el-radio-button :label="true">收藏</el-radio-button>
          </el-radio-group>
          <!-- 列表 -->
          <div class="img-list">
            <div @click="selectedImage(item.url)" :class="{selected:selectedImageUrl===item.url}" class="img-item "
              v-for="item in images" :key="item.id">
              <img :src="item.url" alt />
            </div>
          </div>
          <!-- 分页 -->
          <el-pagination background layout="prev, pager, next" @current-change="changePager"
            :current-page="filterParams.page" :page-size="filterParams.per_page" :total="total"></el-pagination>
        </el-tab-pane>
        <el-tab-pane label="上传图片" name="upload">
          <!-- 上传组件 -->
          <el-upload 
             class="avatar-uploader" 
             action="http://ttapi.research.itcast.cn/mp/v1_0/user/images" 
             name="image"
            :headers='headers' 
            :show-file-list="false" 
            :on-success="unloadImageSuccess"
            >
            <img v-if="uploadImageUrl" :src="uploadImageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmImage">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import auth from '@/utils/auth'
import defaltImage from '@/assets/default.png'
  export default {
    name: 'my-image',
    props:['value'],
    data() {
      return {
        // 控制对话框打开关闭
        dialogVisible: false,
        // 当前激活的选项卡name的值
        activeName: 'list',
        // 查询素材列表条件
        filterParams: {
          collect: false,
          page: 1,
          per_page: 8
        },
        // 图标列表
        images: [],
        // 总条数
        total: 0,
        // 选中图片地址
        selectedImageUrl: null,
        // 上传图片请求头
       headers:{
          Authorization:`Bearer ${auth.getUser().token}`
        },
        uploadImageUrl:null,
        // 确认图片地址
        // confirmImageUrl:defaltImage,
        // 默认图片
        defaltImage
      }
    },
    methods: {
      // 确认图片
      confirmImage(){
      //要根据当前激活选项卡去做不同的业务
      if(this.activeName === 'list') {
        // 激活素材库
        if(!this.selectedImageUrl) return this.$message.warning('请选中一张图片')
        // 预览
        // this.confirmImageUrl = this.selectedImageUrl
        // 传给父
        this.$emit('input',this.selectedImageUrl)
        // 关闭对话框
        this.dialogVisible = false
      }
      // 激活上传图片
      if(this.activeName === 'upload') {
      // 校验
      if(!this.uploadImageUrl) return this.$message.warning('请上传一张图片')
      // 预览
      // this.confirmImageUrl = this.confirmImageUrl
       // 传给父
        this.$emit('input',this.uploadImageUrl)
      // 关闭对话框
        this.dialogVisible = false
      }  
      },
      // 上传图片
      unloadImageSuccess(res){
      this.$message.success('上传成功')
      this.uploadImageUrl = res.data.url
      },
      // 选中图片
      selectedImage(url) {
        this.selectedImageUrl = url
      },
      // 切换全部收藏
      changeCollect() {
        this.filterParams.page = 1
        this.getImages()
      },
      // 分页函数
      changePager(newPage) {
        this.filterParams.page = newPage
        this.getImages()
      },
      // 打开对话框
      openDialog() {
        // 打开对话框
        this.dialogVisible = true
        // 默认激活素材库
        this.activeName = 'list'
        // 默认第一页
        this.filterParams.page = 1
        // 获取素材列表数据
        this.getImages()
        // 清空 选中
        this.selectedImageUrl = null
        this.uploadImageUrl = null
      },
      // 获取图片列表
      async getImages() {
        const {
          data: {
            data
          }
        } = await this.$http.get('/user/images', {
          params: this.filterParams
        })
        this.images = data.results
        this.total = data.total_count
      }
    }
  }
</script>

<style scoped lang='less'>
  .my-image {
    display: inline-block;
    margin-top: 10px;
    margin-right: 20px;
  }

  .img_btn {
    width: 150px;
    height: 150px;
    border: 1px dashed #ddd;

    img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }

  .img-list {
    line-height: 0;
    margin-bottom: 15px;

    .img-item {
      width: 150px;
      height: 120px;
      display: inline-block;
      border: 1px dashed #ddd;
      margin-top: 15px;
      margin-right: 15px;
      position: relative;

      &.selected {
        &::after {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.4) url(../assets/selected.png) no-repeat center /50px 50px
        }
      }

      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }

  /deep/ .el-dialog__body {
    padding-bottom: 0;
  }
</style>